<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo 9 slot</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="source_title"></todo-title>
    <todo-items slot="todo-items" v-for="_item in source_todo_items" :item="_item"></todo-items>
  </todo>
</div>

<script>
  Vue.component("todo", {
    template: ' <div>\
                  <slot name="todo-title"></slot>\
                  <ul>\
                    <slot name="todo-items"></slot>\
                  </ul>\
                </div>'
  });

  Vue.component("todo-title", {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  Vue.component("todo-items", {
    props: ['item'],
    template: '<li>{{item}}</li>'
  });

  var app = new Vue({
    el : "#app",
    data: {
      source_title: 'jezhang to do list',
      source_todo_items: ['Java', 'Python', 'Linux']
    }
  })
</script>
</body>
</html>
